<template>
  <div class="page_root">
    <div class="page_left">
      <tabs-drawer :drawerList="drawerList" :currentIndex="currentIndex" @change="changeIndex">
      </tabs-drawer>
    </div>
    <div class="page_right">
     
      <text-c  ref="text" :type="currentIndex"></text-c>
       
    </div>
  </div>
</template>

<script>
import TabsDrawer from "@/components/TabsDrawer/index.vue";

import TextC from "./subcomponents/TextC.vue"
export default {
  components: {
    TabsDrawer,
    TextC
  },
  data() {
    return {
      drawerList: [
        {
          index: 0,
          name: "text1",//todo
        },
        {
          index: 1,
          name: "text2",
        },
        
      ],
      currentIndex: 0,
    };
  },
  methods: {
    loadData() {
      this.$refs.text.loadData();
    },

    changeIndex(index) {
      this.currentIndex = index;
      this.$nextTick(()=>{
        this.loadData();
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.page_root {
  display: flex;
  height: 100%;

  .page_right {
    flex: 1;

    &>div {
      height: 100%;
      width: 100%;
    }
  }
}
</style>